import React from 'react'
import { Image, NavBar, Toast, ActionBar } from 'react-vant';
import { ITEMTYPE,ALLSTATE } from "../../types/store.d"
import { CartO, ChatO, ShopO } from '@react-vant/icons';
import { useLocation, useNavigate } from "react-router-dom"
import { useDispatch, useSelector } from "react-redux";
import * as Action from "../../actions/index"
function Detail(props: ITEMTYPE) {
    const location = useLocation()
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const myobj = location.state as ITEMTYPE;
    console.log(myobj);
    const add_shopcar = () => {
        dispatch(Action.add_shopcar(myobj))
        navigate("/home/shopcar")
    }
    const shopcarArr=useSelector((state:ALLSTATE)=>{
        return state.shopcarArr
    })
    return (
        <div>
            <NavBar
                title="标题"
                leftText="返回"
                onClickLeft={() => navigate("/")}
                // rightText={<Search fontSize={20} />}
                onClickRight={() => Toast('按钮')}
            />
            <Image width="370" height="300" src={myobj.img} />
            <p style={{ color: "red", fontSize: "20px" }}>￥{myobj.price}.00</p>
            <p style={{ fontWeight: "700", fontSize: "20px" }}>{myobj.title}</p>
            <div className='demo-action-bar'>
                <ActionBar>
                    <ActionBar.Icon icon={<ChatO />} badge={{ dot: true }} text="客服" />
                    <ActionBar.Icon icon={<CartO />} badge={{ content: shopcarArr.length }} text="购物车" />
                    <ActionBar.Icon icon={<ShopO />} text="店铺" />
                    <ActionBar.Button type="warning" text="加入购物车" onClick={() => add_shopcar()} />
                    <ActionBar.Button type="danger" text="立即购买" />
                </ActionBar>
            </div>
        </div>
    )
}

export default Detail